<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/login.css"/>
    <title>选择时间</title>
</head>
<body>
    <div class="choose_time content">
        <div class="lesson_clock">
            <ul class="clear">
                <li>
                    <p class="s2">
                        <span>03.09</span>
                        <span>周二</span>
                    </p>
                </li>
                <li>
                    <p class="s2">
                        <span>03.08</span>
                        <span>周二</span>
                    </p>
                </li>
                <li>
                    <p class="s2">
                        <span>03.08</span>
                        <span>周二</span>
                    </p>
                </li>
                <li>
                    <p class="s2">
                        <span>03.08</span>
                        <span>周二</span>
                    </p>
                </li>
                <li>
                    <p class="s2">
                        <span>03.08</span>
                        <span>周二</span>
                    </p>
                </li>
                <li class="on">
                    <p class="s2">
                        <span>03.09</span>
                        <span>周二</span>
                    </p>
                </li>
            </ul>
        </div>
        <div class="details_time">
            <table>
                <tr>
                    <td class="empty">&nbsp;</td>
                    <td class="empty">&nbsp;</td>
                    <td class="on">10:00</td>
                    <td class="on">10:30</td>
                    <td class="on">11:00</td>
                    <td>11:30</td>
                </tr>
                <tr>
                    <td>12:00</td>
                    <td>12:30</td>
                    <td>13:00</td>
                    <td>13:30</td>
                    <td>14:00</td>
                    <td>14:30</td>
                </tr>
                <tr>
                    <td class="fail">15:00</td>
                    <td class="fail">15:30</td>
                    <td class="fail">16:00</td>
                    <td class="fail">16:30</td>
                    <td class="fail">17:00</td>
                    <td>17:30</td>
                </tr>
                <tr>
                    <td>18:00</td>
                    <td>18:30</td>
                    <td>19:00</td>
                    <td>19:30</td>
                    <td>20:00</td>
                    <td>20:30</td>
                </tr>
                <tr>
                    <td>21:00</td>
                    <td>21:30</td>
                    <td>22:00</td>
                    <td class="empty">&nbsp;</td>
                    <td class="empty">&nbsp;</td>
                    <td class="empty">&nbsp;</td>
                </tr>
            </table>
            <div class="choose_describe">
                <span><i class="co1"></i>预约时间</span>
                <span><i class="co2"></i>已被预约</span>
            </div>
        </div>
        <div class="btn-box">
            <a href="#" class="btn btn-long">确认</a>
        </div>
    </div>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script>
        function time_choose(){
            var td = $('.details_time table tr td');
            td.on('touchend',function(){
                if($(this).hasClass('empty') || $(this).hasClass('fail')) return;
                $(this).toggleClass('on');
            })
        }
        time_choose();
    </script>
</body>
</html>